<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>

    <style>
        .outer {
            border: 1px solid red;
            margin: auto;
        }
        
        .wrapper {
            width: 300px;
            border: 1px solid blue;
            margin: 25px;
        }
        
        .wrapper button {
            margin: 25px;
        }
    </style>

</head>

<body>

    <div class="outer">
        <div class="wrapper">
            <button type="button">按钮1</button>
            <button type="button">按钮2</button>
        </div>
    </div>

    <script type="text/javascript">
        (function() {
            const type = 'click';

            let outer = document.querySelector('.outer');

            let fn0 = function(event) {
                console.log(this, event.target);
            }

            outer.addEventListener(type, fn0, false);

            let wrapper = document.querySelector('.wrapper');

            let fn1 = function(event) {
                console.log(this, event.target);
                event.stopPropagation();
            }

            wrapper.addEventListener(type, fn1, false); //父元素绑定监听器

            let btn1 = document.querySelector('.wrapper button:first-child');

            let fn2 = function(event) {
                console.log(this, event.target);
            }

            btn1.addEventListener(type, fn2, false); //第一个按钮绑定事件监听器
        })();
    </script>

</body>

</html>